<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

      <div id="introduction" class="section scrollspy">
        <h4>Introduction</h4>
        <p class="caption">ScrollFire is a jQuery Plugin that executes callback functions depending on how far into the page you've scrolled. We'll show you how you can use this plugin with many demos and examples.</p>
      </div>


      <div id="initialization" class="section scrollspy">
        <h4>jQuery Plugin Initialization</h4>
        <pre><code class="language-javascript col s12">
  var options = [
    {selector: '.class', offset: 200, callback: customCallbackFunc },
    {selector: '.other-class', offset: 200, callback: function() {
      customCallbackFunc();
    } },
  ];
  Materialize.scrollFire(options);
        </code></pre>
      </div>

      <div id="options" class="section scrollspy">
        <h4>jQuery Plugin Options</h4>
        <table class="highlight">
          <thead>
            <tr>
                <th>Option Name</th>
                <th>Description</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>selector</td>
              <td>The selector for the element that is being tracked.</td>
            </tr>
            <tr>
              <td>offset</td>
              <td>If this is 0, the callback will be fired when the selector element is at the very bottom of the user's window.</td>
            </tr>
            <tr>
              <td>callback</td>
              <td>Execute a callback function when the user scrolls to the threshold. It will only be called once. <br /> The callback provides a parameter which refers to the current element selected.</td>
            </tr>
          </tbody>
        </table>

        <!-- Demo -->
        <h2 class="header">ScrollFire Demo</h2>
        <p>Scroll through slowly to get sense of what ScrollFire can do for you. This is the ScrollFire code that we have used on this page.</p>
        <pre>
    <code class="language-javascript">
    var options = [</code>
      <code id="call-1" class="language-javascript">{selector: '#staggered-test', offset: 50, callback: function(el) {
        Materialize.toast("This is our ScrollFire Demo!", 1500 );
      } },</code>
      <code id="call-2" class="language-javascript">{selector: '#staggered-test', offset: 205, callback: function(el) {
        Materialize.toast("Please continue scrolling!", 1500 );
      } },</code>
      <code id="call-3" class="language-javascript">{selector: '#staggered-test', offset: 400, callback: function(el) {
        Materialize.showStaggeredList($(el));
      } },</code>
      <code id="call-4" class="language-javascript">{selector: '#image-test', offset: 500, callback: function(el) {
        Materialize.fadeInImage($(el));
      } }</code>
    ];
    Materialize.scrollFire(options);
        </code></pre>
        <ul id="staggered-test">
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
        </ul>

        <img id="image-test" class="responsive-img" src="https://unsplash.imgix.net/reserve/nE6neNVdRPSIasnmePZe_IMG_1950.jpg?dpr=1.25&fit=crop&fm=jpg&h=700&q=75&w=1050">
      </div>



    </div>

    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#introduction">Introduction</a></li>
            <li><a href="#initialization">Initialization</a></li>
            <li><a href="#options">Options</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>

<script>

</script>

